<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul li {
        list-style: none;
    }

    .box {
        display: flex;
    }

    .box button {
        display: block;
    }
</style>

<body>
    <div id="app">
        <div class="box">
            <input type="checkbox" v-model="isAllCheck2">
            <div>
                <div v-for="(item,index) in list1">
                    <input type="checkbox" v-model="item.checked">
                    <span>{{ item.type }}</span>
                </div>
            </div>
            <button @click="moveToLeft"> 《 </button>
            <button @click="moveToRight">》</button>
            <input type="checkbox" v-model="isAllCheck">
            <div>
                <div v-for="(item,index) in list2">
                    <input type="checkbox" v-model="item.checked">
                    <span>{{ item.type }}</span>
                </div>
            </div>

        </div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const { createApp, ref, computed } = Vue
    createApp({
        setup() {
            let list1 = ref([{
                type: "备选项1",
                checked: false
            }, {
                type: "备选项2",
                checked: false
            }, {
                type: "备选项3",
                checked: false
            }, {
                type: "备选项4",
                checked: false
            }])
            let list2 = ref([{
                type: "备选项5",
                checked: false
            }, {
                type: "备选项6",
                checked: false
            }, {
                type: "备选项7",
                checked: false
            }, {
                type: "备选项8",
                checked: false
            }])
            const isAllCheck = computed({
                get: () => list2.value.every(item => item.checked),
                set: (val) => {
                    list2.value.forEach(item => {
                        item.checked = val
                    })
                }
            })
            const isAllCheck2 = computed({
                get: () => list1.value.every(item => item.checked),
                set: (val) => {
                    list1.value.forEach(item => {
                        item.checked = val
                    })
                }
            })
            const moveToRight = () => {
                const selectedItems = list1.value.filter(item => item.checked)
                list1.value = list1.value.filter(item => !item.checked)
                list2.value = [...list2.value, ...selectedItems]
            }

            const moveToLeft = () => {
                const selectedItems = list2.value.filter(item => item.checked)
                list2.value = list2.value.filter(item => !item.checked)
                list1.value = [...list1.value, ...selectedItems]
            }
            return {
                list1,
                list2,
                isAllCheck,
                isAllCheck2, moveToRight, moveToLeft
            }
        }
    }).mount("#app")
</script>

</html>